<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
    <head
            th:replace="~{segmentation/_right_bottom_header::_header_common(~{::title},~{::link},~{::style})}">
        <title>菜单新增</title>
        <link>
        <style type="text/css"></style>
    </head>
    <body>
        <div class="layuimini-container">
            <div class="layuimini-main">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>菜单新增</legend>
                </fieldset>
                <form class="layui-form" id="menuFormAdd" action="">
                    <input type="hidden" th:value="${p != null ? p.id : ''}" name="parentId">
                    <div class="layui-form-item">
                        <label class="layui-form-label">上级菜单</label>
                        <div class="layui-input-block">
                            <input type="text" name="parentName" lay-verify=""
                                   autocomplete="off" placeholder="" th:value="${p != null ? p.name : ''}"
                                   class="layui-input disabled" disabled readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required-red">*</span>菜单名称
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="required|name"
                                   lay-verType="tips"
                                   placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required-red">*</span>菜单代码
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="code" lay-verify="required|code"
                                   lay-verType="tips"
                                   placeholder="请输入菜单代码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请求地址
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="url" lay-verify="url"
                                   lay-verType="tips"
                                   placeholder="请输入请求地址" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required-red">*</span>图标
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="icon" lay-verify="required|icon"
                                   lay-verType="tips"
                                   placeholder="请输入图标" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required-red">*</span>排序</label>
                        <div class="layui-input-block">
                            <input type="text" name="indexSort" lay-verify="required|number|indexSort"
                                   lay-verType="tips"
                                   placeholder="请输入排序" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required-red">*</span>打开方式
                        </label>
                        <div class="layui-input-block">
                            <select name="target" lay-filter="targetFilter" lay-search="" lay-verify="required"
                                    lay-verType="tips">
                                <option value="">请选择打开方式</option>
                                <option th:each="item : ${@typeServiceImpl.findByParentCodeList('systemMenuTarget')}"
                                        th:value="${item.typeCode}"
                                        th:text="${item.typeName}"
                                        th:if="${p.level < 2 || '_event' == item.typeCode}">
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label"><span class="required-red">*</span>菜单类别
                        </label>
                        <div class="layui-input-block">
                            <input th:each="item : ${@typeServiceImpl.findByParentCodeList('systemMenuCategory')}"
                                   th:title="${item.typeName}"
                                   th:value="${item.typeValue}"
                                   th:checked="${9999 == item.typeValue}"
                                   th:if="${p.level < 2 || item.typeValue != 9999}"
                                   type="radio" name="category" lay-verify="required|category"
                                   lay-verType="tips">
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label"><span class="required-red">*</span>菜单类型
                        </label>
                        <div class="layui-input-block">
                            <input th:each="item : ${@typeServiceImpl.findByParentCodeList('systemMenuType')}"
                                   th:title="${item.typeName}"
                                   th:value="${item.typeValue}"
                                   th:checked="${9999 == item.typeValue}"
                                   type="radio" name="type" lay-verify="required|type"
                                   lay-verType="tips">
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label"><span class="required-red">*</span>启用状态
                        </label>
                        <div class="layui-input-block">
                            <input th:each="item : ${@typeServiceImpl.findByParentCodeList('enableStatus')}"
                                   th:title="${item.typeName}"
                                   th:value="${item.typeValue}"
                                   th:checked="${1 == item.typeValue}"
                                   type="radio" name="enableStatus" lay-verify="required|enableStatus"
                                   lay-verType="tips">
                        </div>
                    </div>
                    <div class="layui-form-item custom-text-align"
                         sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_MENU_LIST_MANAGEMENT:add')">
                        <a class="layui-btn" lay-submit="" lay-filter="menuFormAddSubmit">保存</a>
                    </div>
                </form>
            </div>
        </div>

        <div th:replace="~{segmentation/_tail::_tail_common}"></div>
        <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
        <script th:inline="javascript">
            /*<![CDATA[*/
            [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_MENU_LIST_MANAGEMENT:add')"]
            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;
                // , laydate = layui.laydate;
                //自定义验证规则
                form.verify({
                    name: function (value) {
                        if (value.length > 64) {
                            return '菜单名称最多64个字符';
                        }
                    },
                    code: function (value) {
                        if (value.length > 64) {
                            return '菜单代码最多64个字符';
                        }
                    },
                    url: function (value) {
                        if (value.length > 128) {
                            return '请求地址最多128个字符';
                        }
                    },
                    icon: function (value) {
                        if (value.length > 128) {
                            return '图标最多128个字符';
                        }
                    },
                    indexSort: function (value) {
                        if (!value) {
                            return;
                        }
                        if (!parseInt(value)) {
                            return '请输入数字';
                        }
                        if (value.length > 7) {
                            return '排序最多7个位数字';
                        }
                    },
                    category: function (value) {
                    },
                    type: function (value) {
                    },
                    enableStatus: function (value) {
                    }
                });

                //监听提交
                form.on('submit(menuFormAddSubmit)', function (data) {
                    $.ajax({
                        type: 'POST',
                        url: '/system/menu/save',
                        data: data.field,
                        dataType: 'json',
                        success: function (data) {
                            if (data.code == Result.SUCCESS) {
                                layer.msg('成功!', {
                                    icon: 1,
                                    shade: [0.3, '#f5f5f5'],
                                    time: 1500
                                }, function () {
                                    $("#menuList", window.parent.document).attr('value', 1);
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                });
                            } else {
                                layer.msg(data.msg, {
                                    icon: 2,
                                    time: 3000
                                });
                            }
                        }
                        /* error:function(data) {
                            console.log(data.msg);
                        }, */
                    });
                    return false;//返回false防止重复提交
                });
            });
            [/]
            /*]]>*/
        </script>
    </body>
</html>